<script setup lang="ts">
import { ref,watch,computed } from 'vue'
import $api from '@/api'
import { useRouter,onBeforeRouteLeave } from 'vue-router'
import { useStore } from 'vuex'
import useToast from '@/hooks/useToast'
const $router=useRouter(),$store=useStore()
const checkAll=ref(false),carts=ref([]),amount=ref(0)
const canSettle=computed(() =>carts.value.some(item =>item._checked))
const length=computed(() =>carts.value.filter(item =>item._checked).length)
onBeforeRouteLeave((to, from) => {
  carts.value.filter(item =>item._number!=item.count).map(item =>{
    item.count=item._number
    delete item._checked
    delete item._number
    $api.cart.edit(item)
  })
})
//查询购物车列表
function getCarts(){
  const {data}=$api.cart.list()
  watch(data,(_data:Array<any>) =>{
    _data.map(item =>{
      item._checked=false
      item._number=item.count
    })
    carts.value=_data
  })
}
function decreaseNumber(item) {
  if(item._number==1) return
  item._number--
}
function plusNumber(item) {
  if(item._number==item.stock) return
  item._number++
}
//跳转商品详情
function gotoDetail(item) {
  $router.push({
    path:'/goods/detail',
    query:{
      id:item.goods_id
    }
  })
}
//去结算
function gotoOrders() {
  if(!canSettle.value) return
  const ids=carts.value.filter(item =>item._checked).map(item =>item._id)
  $router.push({
    path:'/orders',
    query:{
      ids:ids
    }
  })
}
//批量删除
function deleteOrders() {
  const {data}=$api.cart.del(carts.value.filter(item =>item._checked).map(item =>item._id))
  watch(data,(_data) =>{
    useToast('删除成功')
    getCarts()
  })
}
watch(checkAll,(_checkAll) =>{
  if(_checkAll){
    carts.value.map(item => item._checked=true)
  }
})
watch(carts,(_carts) =>{
  const isAll=_carts.every(item => item._checked==true)
  checkAll.value=isAll
  amount.value=_carts.filter(item => item._checked).reduce((acc,curr,idx,arr) => acc+curr.price*curr._number,0)
},{
  deep:true
})
getCarts()
</script>

<template>
  <div
    w:bg="blue-gray-100"
  >
    <div v-for="(item,idx) in carts" :key="idx"
      w:flex="~ nowrap"
      w:p="4"
      w:border="rounded-2xl"
      w:bg="white"
      w:m="y-4"
    >
      <div
        w:flex="~ nowrap"
        w:align="items-center"
      >
        <div class="iconfont icon-check-on" v-if="item._checked" @click="item._checked=false;"
          w:text="4xl red-500"
        ></div>
        <div class="iconfont icon-check-off" v-else @click="item._checked=true;"
          w:text="4xl"
        ></div>
        <img :src="item.goods_thumb" @click="gotoDetail(item)"
          w:w="32"
          w:m="x-4"
        />
      </div>
      <div
        w:flex="1"
      >
        <div
          w:text="3xl"
        >{{item.goods_name}} {{item.sku_name}}</div>
        <div
          w:flex="~ nowrap"
          w:justify="between"
          w:align="items-center"
          w:m="t-4"
        >
          <div
            w:text="red-500"
          >
            <span>￥</span>
            <span
              w:text="3xl"
            >{{item.price}}</span>
          </div>
          <div
            w:flex="~ nowrap"
            w:align="items-center"
          >
            <div class="iconfont icon-decrease" @click="decreaseNumber(item)"></div>
            <input type="number" max="30" min="0" disabled :value="item._number"
              w:outline="none"
              w:m="x-2"
              w:h="8"
              w:w="10"
              w:bg="gray-200"
              w:text="center"
            />
            <div class="iconfont icon-plus" @click="plusNumber(item)"></div>
          </div>
        </div>
      </div>
    </div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:h="24"
      w:p="x-3"
      w:pos="absolute bottom-0 left-0"
      w:w="full"
      w:bg="white"
    >
      <div
        w:flex="~ nowrap"
        w:align="items-center"
      >
        <div class="iconfont icon-check-on" v-if="checkAll" @click="checkAll=false;"
          w:text="4xl red-500"
        ></div>
        <div class="iconfont icon-check-off" v-else @click="checkAll=true;"
          w:text="4xl"
        ></div>
        <div
          w:m="x-3"
        >全选</div>
        <div>合计:</div>
        <div
          w:font="bold"
        >￥{{amount}}</div>
      </div>
      <div
        w:flex="~ nowrap"
      >
        <div @click="deleteOrders" :class="[canSettle?'':'opacity-50']"
          w:flex="~"
          w:align="items-center"
          w:justify="center"
          w:bg="gray-500"
          w:text="white"
          w:border="rounded-full"
          w:p="y-4 x-8"
          w:m="x-2"
        >删除</div>
        <div @click="gotoOrders" :class="[canSettle?'':'opacity-50']"
          w:flex="~"
          w:align="items-center"
          w:justify="center"
          w:bg="red-500"
          w:text="white"
          w:border="rounded-full"
          w:p="y-4 x-8"
        >去结算({{length}})</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>

<route>
{
  name: "cart",
  meta: {
    auth: true,
    roles: [],
    cache: false,
    isTabBar: true
  }
}
</route>